<template>
  <div class="register">
    <div class="register_box">
      <div class="title_register">注册</div>
      <!-- 登录表单 -->
      <div class="main_register">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          class="login_form"
        >
          <!-- 用户名 -->
          <el-form-item label="手机号" prop="num">
            <input class="input_num" v-model="loginForm.num" />
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item label="请输入验证码" style="display:flex;">
            <input
              class="input_verification"
              v-model="loginForm.verification"
            /><el-link type="primary">获取验证码</el-link>
          </el-form-item>
          <el-divider></el-divider>
          <!-- 密码 -->
          <el-form-item label="请输入密码">
            <input
              type="password"
              class="input_password"
              v-model="loginForm.password"
              placeholder="(6-10数字字母组合密码)"
            />
          </el-form-item>
          <el-divider></el-divider>
          <!-- 按钮区域 -->
          <el-form-item>
            <el-button
              type="primary"
              round
              style="background:#2860EA;margin:1rem 0 0 0;width: 20.25rem;"
              ><router-link to="/success" style="text-decoration: none;"
                ><span style="color:#FFFFFF">立即注册</span></router-link
              ></el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style Lang="less" scoped>
.register_box {
  width: 59.5rem;
  height: 35.875rem;
  background-image: url(../assets/img/2.png);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.title_register {
  font-size: 1.8125rem;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  line-height: 4.875rem;
  margin: 4.8125rem auto 0 auto;
}
.input_num,
.input_password,
.input_verification {
  background: transparent;
  border: none;
  outline: medium;
  width: 12rem;
}
.input_verification {
  width: 8rem;
}
.el-form-item {
  margin-top: 2.5625rem;
  margin-bottom: 0;
}
.el-divider {
  margin: 0;
  width: 20rem;
  background: #9b9b9b;
}
.main_register {
  margin: 0 auto;
}
</style>
<script>
export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        num: '',
        password: '',
        verification: ''
      }
      // 这是表单的验证规则
      // rules: {
      //   num: [
      //     { required: true, message: '请输入手机号', trigger: 'blur' },
      //     { min: 11, max: 11, message: '长度为11位', trigger: 'blur' }
      //   ]
      // }
    }
  },
  methods: {}
}
</script>
